<template>
  <view class="u-m-t-24 u-m-b-24">
    <!-- 拼团正在拼列表 -->
    <view class="pt-list-box">
      <template v-if="goodsInfo.pt_activity.current_activity.length">
        <div class="title">
          <div class="left">
            <text class="num-color">{{
              goodsInfo.pt_activity.current_activity_num
            }}</text>
            <text>人正在拼团，可直接参与</text>
          </div>

          <div class="right" @click="onChengyuan">
            <text class="color-999">查看成员</text>
            <text class="iconfont icon-arrow-right u-font-24"></text>
          </div>
        </div>
        <scroll-view scroll-y class="list">
          <div
            class="item"
            v-for="item in goodsInfo.pt_activity.current_activity"
            :key="item.id"
          >
            <div class="left">
              <div class="imgs u-m-r-24">
                <image
                  :src="user.avatar"
                  mode="aspectFill"
                  v-for="(user, uindex) in item.user_list"
                  :key="uindex"
                ></image>
              </div>
              <view>
                <view class="u-m-b-2 u-font-24 u-line-1">
                  <text v-for="(user, uindex) in item.user_list" :key="uindex">
                    {{ user.name }}
                    <text v-if="uindex < item.user_list.length - 1">、</text>
                  </text>
                </view>
                <view class="u-font-20 u-flex u-line-1" style="color: #f0250e">
                  仅差

                  <template v-if="item.party_type == 0">
                    {{ item.surplus_num }}人
                  </template>
                  <template v-else> {{ item.surplus_num_goods }}件 </template>

                  成团，剩余
                  <u-count-down
                    :timestamp="item.end_time"
                    font-size="20"
                    separator-size="20"
                    color="#F0250E"
                    separator-color="#F0250E"
                  ></u-count-down>
                </view>
              </view>
            </div>

            <div class="right-bt" @click="onClickPt(item)">去拼团</div>
          </div>
        </scroll-view>
      </template>
      <div
        class="pt-lc"
        :style="{
          background: `url(${asyncImgs.pintuan.goods_lc}) center / contain no-repeat`,
        }"
      >
        <view class="title">拼团流程</view>
        <view class="lc-list">
          <div class="item">
            <view class="font-w-600">参与拼团</view>
            <view class="color-999 u-font-24 u-m-t-4">选择拼团爆品</view>
          </div>
          <div class="item">
            <view class="font-w-600">邀用户参团</view>
            <view class="color-999 u-font-24 u-m-t-4">共享低价免运费</view>
          </div>
          <div class="item">
            <view class="font-w-600">{{
              goodsInfo.pt_activity.party_type == 0 ? "人满发货" : "订单满发货"
            }}</view>
            <view class="color-999 u-font-24 u-m-t-4">不满自动退款</view>
          </div>
        </view>

        <div class="pt-gz-box">
          <div class="left">
            <text class="iconfont icon-prompt u-font-34 u-m-r-6"></text>
            拼团不与商品促销、优惠活动同享
          </div>
          <div class="right color-999" @click="$utils.toUrl('/pt/rule/index')">
            全部规则
            <text class="iconfont icon-arrow-right u-font-24 color-333"></text>
          </div>
        </div>
      </div>
    </view>

    <!-- 拼团广场 -->
    <view v-if="goodsInfo.pt_activity.goods_activity" class="pt-square">
      <view class="title">
        <div class="left">拼团广场，参与拼团，立即拼成</div>
        <div class="right" @click="$utils.toUrl('/pt/square/index')">
          <text class="color-999">查看全部</text>
          <text class="iconfont icon-arrow-right u-font-24"></text>
        </div>
      </view>

      <div class="list-box">
        <div class="list-box-1">
          <div class="content">
            <swiper style="height: 284rpx" vertical autoplay circular>
              <swiper-item
                v-for="(item, i) in goodsInfo.pt_activity.goods_activity"
                :key="i"
              >
                <div class="goods">
                  <image :src="item.cover_pic" mode="aspectFill"></image>
                  <div class="goods-content">
                    <div class="u-line-2 u-m-b-10 font-w-600">
                      {{ item.name }}
                    </div>
                    <div class="u-flex u-m-b-20">
                      <div class="user-date">
                        <image :src="item.avatar"></image>
                        <text>正在拼团</text>
                        <u-count-down
                          class="u-m-l-10"
                          :timestamp="item.end_time"
                          font-size="20"
                          separator-size="20"
                          color="#F0250E"
                          separator-color="#F0250E"
                          bg-color="transparent"
                        ></u-count-down>
                      </div>
                    </div>

                    <div class="price-bt">
                      <div class="pt-price">
                        <text style="font-w-600 ">
                          ￥
                          <text class="u-font-36">
                            {{ item.pt_price | priceBeforeZero }}
                          </text>
                          {{ item.pt_price | priceAfterZero }}
                        </text>
                        <text class="u-m-l-4">拼团价</text>
                      </div>
                      <div
                        class="pt-bt"
                        @click="
                          $utils.toUrl(
                            `/goods/goods/goods?pt_number=${item.pt_number}&id=${item.goods_id}&is_pt=1`
                          )
                        "
                      >
                        <div>拼团中</div>
                        <div class="u-font-24">参与拼团</div>
                      </div>
                    </div>
                  </div>
                </div>
              </swiper-item>
            </swiper>
          </div>
        </div>
      </div>
    </view>

    <u-popup v-model="showPopup" closeable mode="center" border-radius="20">
      <div class="popup-box">
        <div class="title">查看群成员</div>

        <scroll-view scroll-y class="scroll-cy">
          <div
            class="item"
            v-for="item in goodsInfo.pt_activity.current_activity"
            :key="item.id"
          >
            <div class="left">
              <div class="imgs u-m-r-24">
                <image
                  :src="user.avatar"
                  mode="aspectFill"
                  v-for="(user, uindex) in item.user_list"
                  :key="uindex"
                ></image>
              </div>
              <view>
                <view class="u-m-b-2 u-font-24 u-line-1">
                  <text v-for="(user, uindex) in item.user_list" :key="uindex">
                    {{ user.name }}
                    <text v-if="uindex < item.user_list.length - 1">、</text>
                  </text>
                </view>
                <view class="u-font-20 u-flex u-line-1" style="color: #f0250e">
                  仅差
                  <template v-if="item.party_type == 0">
                    {{ item.surplus_num }}人
                  </template>
                  <template v-else> {{ item.surplus_num_goods }}件 </template>

                  成团，剩余
                  <u-count-down
                    :timestamp="item.end_time"
                    font-size="20"
                    separator-size="20"
                    color="#F0250E"
                    separator-color="#F0250E"
                  ></u-count-down>
                </view>
              </view>
            </div>

            <div class="right-bt" @click="onClickPt(item)">去拼团</div>
          </div>
        </scroll-view>
      </div>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    goodsInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  filters: {
    priceBeforeZero(val) {
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.length);
    },
  },
  computed: {},
  data() {
    return {
      showPopup: false,
    };
  },
  methods: {
    onChengyuan() {
      this.showPopup = true;
    },
    onClickPt(item) {
      this.showPopup = false;
      this.$emit("onClickPt", item);
    },
  },
};
</script>

<style lang="scss">
.color-999 {
  color: #8c8c8c;
}
.color-333 {
  color: #262626;
}
.font-w-600 {
  font-weight: 600;
}
.pt-list-box {
  padding: 30rpx 24rpx;
  background: #fff;
  margin-bottom: 24rpx;

  .title {
    display: flex;
    align-items: center;
    .left {
      flex: 1;
      font-weight: 600;
      font-size: 30rpx;
      .num-color {
        color: #f0250e;
      }
    }
    .right {
      font-size: 24rpx;
    }
  }

  .list {
    margin-top: 30rpx;
    max-height: 228rpx;
    .item {
      display: flex;
      align-items: center;
      padding-bottom: 30rpx;
      margin-top: 30rpx;
      border-bottom: 1px solid #f6f6f6;
      &:nth-child(1) {
        margin-top: 0;
      }
      &:nth-last-child(1) {
        border: 0;
      }
      .left {
        flex: 1;
        width: 0;
        display: flex;
        align-items: center;
        .imgs {
          display: flex;
          width: 96rpx;
          image {
            position: relative;
            width: 64rpx;
            height: 64rpx;
            background: #f5f5f5;
            border-radius: 50%;
            margin-left: -32rpx;
            &:nth-child(1) {
              margin-left: 0;
            }
          }
        }
      }

      .right-bt {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120rpx;
        height: 58rpx;
        background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
        border-radius: 120rpx;
        color: #fff;
        font-size: 24rpx;
      }
    }
  }

  .pt-lc {
    padding: 30rpx 24rpx;
    .title {
      line-height: 40rpx;
      font-size: 28rpx;
      font-weight: 600;
      margin-bottom: 30rpx;
    }
    .lc-list {
      display: flex;
      justify-content: space-between;
      padding-left: 10rpx;
      padding-bottom: 30rpx;
      margin-bottom: 24rpx;
      border-bottom: 1px solid #f2f2f2;

      .iconfont {
        flex: 1;
        width: 0;
        padding-left: 20rpx;
        color: #999;
        font-size: 24rpx;
      }
    }
    .pt-gz-box {
      display: flex;
      font-size: 24rpx;
      .left {
        flex: 1;
        width: 0;
      }
    }
  }
}

.pt-square {
  padding: 30rpx 24rpx;
  background: #fff;
  .title {
    display: flex;
    .left {
      flex: 1;
      width: 0;
      font-size: 30rpx;
      font-weight: 600;
    }
  }

  .list-box {
    margin-top: 30rpx;
    height: 364rpx;
    background: #fef3e4;
    border: 2rpx solid #fbeedb;
    border-radius: 20rpx;
    padding: 24rpx 0;
    .list-box-1 {
      padding: 20rpx 0;
      margin: 0 20rpx;
      height: 100%;
      border-radius: 20rpx;
      background: #fef9f1;
      position: relative;
      .content {
        position: absolute;
        left: -20rpx;
        right: -20rpx;
        top: 20rpx;
        bottom: 20rpx;
        border-radius: 20rpx;
        background: #fff;
        .goods {
          display: flex;
          padding: 32rpx 24rpx;
          > image {
            width: 220rpx;
            height: 220rpx;
            border-radius: 10rpx;
          }

          .goods-content {
            flex: 1;
            width: 0;
            margin-left: 20rpx;
            .user-date {
              border-radius: 20rpx;
              display: flex;
              align-items: center;
              background: #fee5e5;
              padding-right: 14rpx;
              font-size: 22rpx;
              color: #f0250e;

              > image {
                margin-right: 4rpx;
                height: 32rpx;
                width: 32rpx;
                border-radius: 50%;
              }
            }

            .price-bt {
              display: flex;
              align-items: flex-end;
              .pt-price {
                flex: 1;
                width: 0;
                color: #f0250e;
                font-size: 24rpx;
              }
              .pt-bt {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 160rpx;
                height: 78rpx;
                background: linear-gradient(180deg, #f22407 0%, #f84d17 100%);
                box-shadow: 0rpx 6rpx 12rpx rgba(240, 37, 14, 0.2);
                border-radius: 20rpx;
                font-size: 18rpx;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
}

.popup-box {
  overflow: hidden;
  border-radius: 20rpx;
  width: 650rpx;
  .title {
    line-height: 90rpx;
    text-align: center;
    font-weight: 600;
    font-size: 32rpx;
  }

  .scroll-cy {
    max-height: 622rpx;
    padding: 0 20rpx;
    .item {
      display: flex;
      align-items: center;
      padding-bottom: 30rpx;
      margin-top: 30rpx;
      border-bottom: 1px solid #f6f6f6;
      &:nth-child(1) {
        margin-top: 0;
      }
      &:nth-last-child(1) {
        border: 0;
      }
      .left {
        flex: 1;
        width: 0;
        display: flex;
        align-items: center;
        .imgs {
          display: flex;
          width: 96rpx;
          image {
            position: relative;
            width: 64rpx;
            height: 64rpx;
            background: #f5f5f5;
            border-radius: 50%;
            margin-left: -32rpx;
            &:nth-child(1) {
              margin-left: 0;
            }
          }
        }
      }

      .right-bt {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120rpx;
        height: 58rpx;
        background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
        border-radius: 120rpx;
        color: #fff;
        font-size: 24rpx;
      }
    }
  }
}
</style>
